<template>
  <view class="main-class-my">
	<view class="gd-header-class ">
	  	 <view class="header-class-my">
	  	   <view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
	  	   <view class="tn-color-black_text tn-flex justify-between tn-text-xl tn-pl-xl tn-pr-xl tn-pb-xl">
	  	     <tn-icon name="title" size="1" />
	  	     <tn-icon name="title" size="1" />
	  	   </view>
	  	 </view>
	  	 <view class="top-icon-class tn-flex justify-end tn-mr-xl">
			<tn-badge :value="unEndOrderCount" type="danger">
			  <tn-icon name="comment" size="50" class="" color="#FFFFFF" @click="toNavigateTo">
			  </tn-icon>
			</tn-badge>
	  	 </view>
	  	 <view class="avatar-class tn-flex items-center">
	  	 	<tn-avatar :url="userInfo.imgurl" size="xl" class="" />
	  	 		<span class="tn-pl-lg tn-text-2xl tn-text-bold" style="color: #FFFFFF;">{{userInfo.staffname}}</span>
	  	 </view>
		 
	  </view>
    <view class="scroll-list-class-my tn-m-xl tn-shadow-md tn-pb-xl">
    	<tn-title title="订单" size="lg" class="tn-pt-sm tn-pl-sm tn-pb-sm tn-text-bold"/>
    	<tn-scroll-list :indicator="false">
    	    <view class="item-container">
    	      <view
    	        v-for="(item,index) in statusData"
    	        :key="index"
    	        class="scroll-item tn-flex-center tn-flex-column tn-text-bold"
    	      >
    	        <image class="empty tn-grey-light_bg" :src="item.imgurl" @click="clickOrder(item)"></image>
    	        <view class="title tn-color-black_text" @click="clickOrder(item)">{{item.text}}</view>
    	      </view>
    	    </view>
    	</tn-scroll-list>
    </view>  
	<view class="function-report-class">
		<view class="report-class tn-m-lg tn-shadow-md" v-if="functionArrayData.length>0">
			<tn-title title="功能" size="lg" class="tn-pt-sm tn-pl-sm tn-pb-sm tn-text-bold " />
			<view class="tn-pb-sm tn-flex-wrap">
				<view class="tn-flex tn-flex-row tn-flex-wrap row-report-class tn-pb-sm" v-for="(itemRow,indexRow) in functionArrayData">
					<view
					  v-for="(item, index) in itemRow" 
					  :key="index"
					  class="scroll-report-item tn-flex-center tn-flex-column tn-text-bold tn-w-1-4 tn-flex-wrap"
					>
					<tn-badge :value="unEndInvoiceCount" type="danger" v-if="item.path=='/pages/invoice/invoice'">
					  <image class="empty tn-grey-light_bg" :src="item.imgurl" @click="clickFunction(item)"></image>
					  <view class="title"  @click="clickFunction(item)">{{ item.text }}</view>
					</tn-badge>  
					<view class="" v-else>
						<image class="empty tn-grey-light_bg" :src="item.imgurl" @click="clickFunction(item)"></image>
						<view class="title"  @click="clickFunction(item)">{{ item.text }}</view>
					</view>
					  
					
					</view>
				</view>
			</view>
		</view>
		
		<view class="report-class tn-m-lg tn-shadow-md">
			<tn-title title="报表" size="lg" class="tn-pt-sm tn-pl-sm tn-pb-sm tn-text-bold "/>
			<view class="tn-pb-sm tn-flex-wrap">
				<view class="tn-flex tn-flex-row tn-flex-wrap row-report-class tn-pb-sm" v-for="(itemRow,indexRow) in reportArrayData">
					<view
					  v-for="(item, index) in itemRow" 
					  :key="index"
					  class="scroll-report-item tn-flex-center tn-flex-column tn-text-bold tn-w-1-4 tn-flex-wrap"
					>
					  <image class="empty tn-grey-light_bg" :src="item.imgurl" @click="clickFunction(item)"></image>
					  <view class="title" @click="clickFunction(item)">{{ item.text }}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- <tn-button  width="90vw" class="tn-shadow-md tn-p-xl tn-text-bold button-class-my" size="xl" height="5vh" bg-color="#FFFFFF" font-size="25rpx" shape="round" @click="loginOut">切换账号</tn-button> -->
		
		<!-- class="tn-pt-xl" -->
		
		<tn-footer :content="appVersion" :fixed="false" />
		
		<!-- <tn-footer content="copyrightg@2004-2018" :fixed="false" class="tn-pt-xl"/> -->
		<!-- <tn-footer content="药都汇版权所有" :fixed="false" /> -->
	</view>
	
	<!-- <tn-list-item class="list-item-class tn-text-bold tn-text-xl"> 报表 </tn-list-item> -->
  </view>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue'
  import { EventBus } from '@/mitt/EventBus.js';
  import { postCall,postLoginOut } from '@/api/index.js'
  import { toastMessage } from '@/utils/toast.js'
  
  const appVersion = ref('');
  const procName = "PROC_APP_DO_MY";
  const unEndInvoiceCount = ref(0);
  onMounted(()=>{
	  getReportInfo();
	  getStateInfo();
	  getVerInfo();
	  getFunctionInfo();
	  getUnEndOrderInfo();
	  getUnEndInvoiceInfo();
  })
  
  const getVerInfo = () =>{
	   const systemInfo = uni.getSystemInfoSync();
	   console.log(systemInfo );
	   if (process.env.UNI_PLATFORM === 'app-plus'  || process.env.UNI_PLATFORM==='app') {
			appVersion.value = "版本号：" + systemInfo.appWgtVersion;
	   } else if (process.env.UNI_PLATFORM === 'h5') {
			appVersion.value = "版本号：" + systemInfo.appVersion;
	   }
  }
  
  
   let userInfo = uni.getStorageSync('USERINFO') ;
  
	const loginOut = () =>{
		postLoginOut().then(res=>{
			uni.setStorageSync("index",0);
			uni.setStorageSync("USERINFO","");
			uni.removeStorageSync("token");
			uni.redirectTo({
				url: '/pages/login/login'
			});
		})
	} 
	
	const reportData =  reactive([])  
	const reportArrayData = reactive([]);
    const getReportInfo = () =>{
	   let params = {};
	   params["P_PROC_NAME"] = procName;
	   params["P_ACTION"] = "REPORT";
	   postCall(params).then(res=>{
		   // console.log(res);
		   if(res){
			   if(res.code===200){
				   Object.assign(reportData,res.data.DATASET);
				   let currentIndex = 0;
				   const groupSize = 4;
				   while (currentIndex < reportData.length) {
					 reportArrayData.push(reportData.slice(currentIndex, currentIndex + groupSize));
					 currentIndex += groupSize;
				   }
			   }
		   }
		   
	   })
   }
   const functionData =  reactive([])
   const functionArrayData = reactive([]);
   const getFunctionInfo = () =>{
   	   let params = {};
   	   params["P_PROC_NAME"] = procName;
   	   params["P_ACTION"] = "FUNCTION";
   	   postCall(params).then(res=>{
   		   // console.log(res);
		   if(res){
			   if(res.code===200){
			      			   Object.assign(functionData,res.data.DATASET);
			      			   let currentIndex = 0;
			      			   const groupSize = 4;
			      			   while (currentIndex < functionData.length) {
			      			     functionArrayData.push(functionData.slice(currentIndex, currentIndex + groupSize));
			      			     currentIndex += groupSize;
			      			   }
			   }
		   }
   		   
   	   })
   }
   
   let unEndOrderCount = ref(0);
   
   const getUnEndOrderInfo = () =>{
   	   let params = {};
   	   params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
   	   params["P_ACTION"] = "QUERYUNEND";
   	   postCall(params).then(res=>{
		   if(res){
			   // console.log(res);
			   if(res.code===200){ 
			   			   // Object.assign(unEndOrder,res.data.DATASET);
			   			   // console.log(unEndOrder)
			   			   unEndOrderCount.value = res.data.DATASET.length;
			   }
		   }
   		   
   	   })
    }
   
    const getUnEndInvoiceInfo = () =>{
    	   let params = {};
    	   params["P_PROC_NAME"] = "PROC_APP_DO_INVOICE";
    	   params["P_ACTION"] = "QUERYUNEND";
    	   postCall(params).then(res=>{
    		   if(res){
    			   console.log(res);
    			   if(res.code===200){ 
    			   		unEndInvoiceCount.value = res.data.DATASET.length;
						console.log(unEndInvoiceCount.value);
    			   }
				   
    		   }
    	   })
    }
   
   
   const statusData = reactive([]) 
   const getStateInfo = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "STATE";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
							   Object.assign(statusData,res.data.DATASET);	   
				}
			}
		   
		})
	   
   }
   
  const currentTabIndex = ref(0)

  const clickFunction = (val) =>{
	  console.log(val.path);
	  if(val.path=="mhky"){
		  plus.share.getServices(res=>{
		  	let sweixin = '';
		  	for (var i = 0; i < res.length; i++) {
		  		let t = res[i];
		  		if (t.id == 'weixin') {
		  		  sweixin = t;
		  		}
		  	}
			console.log(sweixin);
		  	if(sweixin){
		  		sweixin.launchMiniProgram(
		  			{
		  				id: 'gh_15a38a7ec8fc',  // 要跳转小程序的原始ID
		  				path: 'pages/index/index',  //  可带参数
		  				type: 0   // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
		  			},
		  			// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
		  			res2 => {
		  				console.log(typeof res2, res2)
		  				// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
		  				let result = JSON.parse(res2)
		  				console.log(result) 
		  				// 拿到参数后执行你需要的逻辑    
		  				// ......   
		  			},
		  			  err2 => {
		  				console.log(err2)
		  			  }
		  			);
		  	}
		  })
	  }else{
		  uni.setStorageSync("PROC",val)
		  if(val.path==="/pages/login/login"){
			  loginOut();
		  }else{
			  uni.redirectTo({
			  	url: val.path
			  });
		  }
		  
	  }
	  
  }
  const clickOrder = (val) =>{
	  uni.setStorageSync("order",val.id)	
	  uni.redirectTo({
	  	url: val.path
	  });
  }
 const toNavigateTo = (val) =>{
	 uni.redirectTo({
		url: "/pages/order/unendorder"
	 });
 }
  
  // console.log(reportArrayData);
</script>

<style scoped>
	
	/* #ifndef MP-WEIXIN */
    .header-class-my {
      height: 20vh !important;
      /* position: relative; */ /* 添加相对定位 */
	  background:  linear-gradient(to right, var(--beginColor),var(--endColor)) !important;
    }
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
	.header-class-my {
		height: 20vh !important;
		/* position: relative; */
		background-color: #3BAAEC;
	}
	/* #endif */
	
	.empty {
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 15rpx;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: center;
	  background: #FFFFFF;
	}
	.scroll-list-class-my{
		/* margin-top: 10px; */
		/* margin-bottom: 10px; */
		/* position: relative; */
		width: 90vw;
		margin-left: 5vw;
		border-radius: 5px;
		top: -22vh;
		background: #FFFFFF;
		z-index: 666 
	}
	.avatar-class{
		/* position: relative; */
		/* top: -22vh; */
		
		margin-left: 5vw;
	}
	.top-icon-class{
		/* position: relative; */
		top: 2vh;
		width: 90vw;
		margin-left: 5vw;
		/* right: 10vw; */
	}
	.item-container {
		position: relative;
		width: fit-content;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around; 
		width: 90vw;
	}
	.item-report-container {
		position: relative;
		width: fit-content;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start; 
		width: 90vw;
	}
	.row-report-class{
		width: 90vw;
	}
	
	.title {
	  margin-top: 20rpx;
	  color: #000000;
	}
	.report-class{
		position: relative;
		/* top: -22vh ; */
		border-radius: 5px;
		/* margin-top: 43vh; */
		/* height: calc(100vh - 42vh - 3.125rem); */
		/* padding-bottom: 3.25rem; */
	}
	.function-report-class{
		/* position: relative; */
		border-radius: 20px;
		margin-top: 2vh;
	}
	.button-class-my{
		/* position: relative; */
		/* top: -22vh ; */
		/* padding-bottom: 3.25rem; */
		margin-left: 5vw;
	}
	.main-class-my{
		/* height: calc(100vh - 42vh ) !important; */
	}
	.gd-header-class{
		height: 20vh;
		/* flex-direction: column; */
		/* position: fixed; */
		top: 0;
		left: 0;
		width: 100%;
		color: #fff;
		text-align: center;
		z-index: 999	
	}
</style>